<template>
  <div class="app-container">
    <div class="menu_setting_area">
      <div class="menu_preview_area">
        <div class="mobile_menu_preview">
          <div class="mobile_hd">
            中油BP
          </div>
          <div class="mobile_bd">
            <ul class="pre_menu_list" :class="{no_menu:menus.length==0}">
              <template v-if="menus.length">
                <li class="pre_menu_item" v-for="(item,index) in menus" :key="index" :style="'width:'+ 100/Math.min(menus.length+1,3)+'%'">
                  <a href="javascript:void(0);" :class="{current:item==currentSelectedItem}" @click="toggleTopSelectedItem(item)">
                    <i class="icon_menu_dot" v-if="item.subButtons && item.subButtons.length>0"></i>
                    <i class="icon20_common sort_gray"></i>
                    <span class="menu-name">{{item.name}}</span>
                  </a>
                  <div class="sub_pre_menu_box" v-if="item.selected">
                    <ul class="sub_pre_menu_list">
                      <li v-for="(sub,subIdx) in item.subButtons" :key="subIdx">
                        <a href="javascript:void(0);" :class="{current:currentSelectedItem==sub}" @click="toggleSubSelectedItem(sub)">
                          <div class="sub_pre_menu_inner js_sub_pre_menu_inner">
                            <span class="menu-name">{{sub.name}}</span>
                          </div>
                        </a>
                      </li>
                      <li v-if="!item.subButtons || item.subButtons.length<5">
                        <a href="javascript:void(0);" @click="addSubMenu(item)">
                          <span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i class="icon14_menu_add"></i></span>
                        </a>
                      </li>
                    </ul>
                    <i class="arrow arrow_out"></i>
                    <i class="arrow arrow_in"></i>
                  </div>
                </li>
                <li v-if="menus.length<3" class="pre_menu_item" :style="'width:'+ 100/(menus.length+1)+'%'">
                  <a href="javascript:void(0);" @click="addTopMenu">
                    <i class="icon14_menu_add"></i>
                  </a>
                </li>
              </template>
              <li class="pre_menu_item onlyone-li" v-else>
                <a href="javascript:void(0);" @click="addTopMenu" class="pre_menu_link js_addL1Btn" name="最多添加3个一级菜单"
                  draggable="false">
                  <i class="icon14_menu_add"></i>
                  <span class="js_addMenuTips">添加菜单</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="menu_form_area" v-if="currentSelectedItem">
        <div class="portable_editor to_left">
          <div class="editor_inner">
            <div class="global_mod float_layout menu_form_hd js_second_name_bar">
              <h4 class="global_info">
                {{isTopMenuSelected?'菜单名称':'子菜单名称'}}
              </h4>
              <div class="global_extra">
                <a @click="doDeleteMenu" href="javascript:void(0);">删除{{isTopMenuSelected?'':'子'}}菜单</a>
              </div>
            </div>
            <div class="menu_form_bd">
              <div class="msg_sender_tips tips_global" v-if="currentSelectedItem.subButtons && currentSelectedItem.subButtons.length">
                已添加子菜单，仅可设置菜单名称。
              </div>
              <div class="menu_holder">
                <div class="label">
                  {{isTopMenuSelected?'':'子'}}菜单名称
                </div>
                <div class="label-content">
                  <el-input class="label-content-input" placeholder="请输入菜单名称" v-model="currentSelectedItem.name"></el-input>
                  <div class="label-content-error" v-if="!currentSelectedItem.name || !currentSelectedItem.name.trim()">请输入菜单名称</div>
                  <div class="label-content-tip">
                    字数不超过4个汉字或8个字母
                  </div>
                </div>
              </div>
              <div v-if="!currentSelectedItem.subButtons || !currentSelectedItem.subButtons.length">
                <div class="menu_holder">
                  <div class="label label-n">
                    {{isTopMenuSelected?'':'子'}}菜单内容
                  </div>
                  <div class="label-content">
                    <el-radio-group v-model="currentSelectedItem.type">
                      <el-radio label="view">跳转网页</el-radio>
                      <el-radio label="miniprogram">跳转小程序</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div v-if="currentSelectedItem.type == 'view'" class="edit-box">
                    <div class="edit-box-tip">
                        订阅者点击该子菜单会跳到以下链接
                    </div>
                    <div class="clearfix">
                        <div class="label">页面地址</div>
                        <div class="label-content">
                            <el-input class="label-content-input" placeholder="请输入页面地址" v-model="currentSelectedItem.url"></el-input>
                        </div>
                    </div>
                </div>
                <div v-if="currentSelectedItem.type == 'miniprogram'" class="edit-box">
                    <div class="edit-box-tip">
                        订阅者点击该子菜单会跳到以下小程序
                    </div>
                    <div class="clearfix">
                        <div class="label">小程序appId</div>
                        <div class="label-content">
                            <el-input class="label-content-input" placeholder="请输入小程序appId" v-model="currentSelectedItem.appId"></el-input>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="label">小程序路径</div>
                        <div class="label-content">
                            <el-input class="label-content-input" placeholder="请输入小程序路径" v-model="currentSelectedItem.pagePath"></el-input>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="label">备用网页</div>
                        <div class="label-content">
                            <el-input class="label-content-input" placeholder="请输入备用网页" v-model="currentSelectedItem.url"></el-input>
                        </div>
                    </div>
                </div>
              </div>

            </div>
          </div>
          <span class="editor_arrow_wrp">
            <i class="editor_arrow editor_arrow_out"></i>
            <i class="editor_arrow editor_arrow_in"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="toolbar" v-if="menus && menus.length">
      <el-button type="success" @click="saveAndSubmit" :loading="isLoading" size="mini">保存并发布</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentSelectedItem: null,
      isTopMenuSelected: false,
      menus: [],
      isLoading: false
    }
  },
  created () {
    this.loadMenus()
    this.checkLogin()
  },
  methods: {
    loadMenus () {
      this.$get('/wechat/wx-menu/list').then(data => {
        this.menus = data
      })
    },
    checkLogin () {
      this.$get('/admin/admin/check_login')
    },
    doDeleteMenu () {
      this.$$comfirm(
        '确定删除该' + (this.isTopMenuSelected ? '' : '子') + '菜单吗?',
        r => {
          if (this.isTopMenuSelected) {
            // 主菜单
            this.menus.every((el, idx) => {
              if (el === this.currentSelectedItem) {
                this.menus.splice(idx, 1)
                this.currentSelectedItem = null
                return false
              }
              return true
            })
          } else {
            // 子菜单
            this.menus.every(el => {
              let flag = true
              el.subButtons &&
                el.subButtons.every((item, idx) => {
                  if (item === this.currentSelectedItem) {
                    el.subButtons.splice(idx, 1)
                    this.currentSelectedItem = null
                    return (flag = false)
                  }
                  return true
                })
              return flag
            })
          }
        }
      )
    },
    toggleSubSelectedItem (item) {
      this.currentSelectedItem = item
      this.isTopMenuSelected = false
    },
    toggleTopSelectedItem (item) {
      this.menus.forEach(el => (el.selected = false))
      item.selected = true
      this.currentSelectedItem = item
      this.isTopMenuSelected = true
    },
    addSubMenu (item) {
      if (!item.subButtons) {
        item.subButtons = []
      }
      item.subButtons.push({
        name: '菜单名称',
        type: 'view'
      })
      this.currentSelectedItem = item.subButtons[item.subButtons.length - 1]
      this.isTopMenuSelected = false
    },
    saveAndSubmit () {
      if (this.menus.length == 0) {
        this.$messager.error('请填写菜单')
        return
      }
      this.isLoading = true
      this.$postJson(
        '/wechat/wx-menu/save-and-submit',
        JSON.stringify(this.menus)
      )
        .then(data => {
          this.isLoading = false
          this.$$notify('操作成功')
        })
        .catch(_ => {
          this.isLoading = false
        })
    },
    addTopMenu () {
      this.menus.forEach(el => (el.selected = false))
      this.menus.push({
        name: '菜单名称',
        type: 'view',
        selected: true
      })
      this.currentSelectedItem = this.menus[this.menus.length - 1]
      this.isTopMenuSelected = true
    }
  }
}
</script>

<style scoped>
.sub_pre_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu_setting_area:after {
  clear: both;
  content: "\200B";
  display: block;
  height: 0;
}

.menu_preview_area .sub_pre_menu_inner {
  display: block;
  border-top: 1px solid #e7e7eb;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 50px;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}

.pre_menu_item {
  position: relative;
  float: left;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
}

.menu_form_bd {
  font-size: 14px;
}

.pre_menu_item a.current {
  border: 1px solid #44b549;
  line-height: 48px;
  background-color: #fff;
  color: #44b549;
}

.pre_menu_item:nth-child(n + 2) {
  border-left: 1px solid #e7e7eb;
}

.menu_preview_area {
  float: left;
  margin-right: 12px;
  position: relative;
}

.menu_form_area {
  display: table-cell;
  vertical-align: top;
  float: none;
  width: auto;
  *display: block;
  *zoom: 1;
}

.mobile_menu_preview {
  width: 294px;
  -webkit-background-size: contain;
  background-size: contain;
}

.mobile_menu_preview {
  position: relative;
  width: 317px;
  height: 580px;
  background: transparent url("../../assets/wechat/bg_mobile.png") no-repeat 0 0;
  background-position: 0 0;
  border: 1px solid #e7e7eb;
}

.mobile_menu_preview .mobile_hd {
  color: #fff;
  text-align: center;
  padding-top: 30px;
  font-size: 15px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin: 0 30px;
}

.menu_preview_area .pre_menu_list {
  position: absolute;
  bottom: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #e7e7eb;
  background: transparent url(../../assets/wechat/bg_mobile_foot.png) no-repeat
    0 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-left: 43px;
}

.onlyone-li {
  float: none;
  width: auto;
  overflow: hidden;
  *zoom: 1;
  *overflow: visible;
}

.menu_preview_area .pre_menu_list .pre_menu_item .pre_menu_link {
  border: 1px solid #44b549;
  color: #44b549;
}

.pre_menu_item a {
  display: block;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  color: #616161;
  text-decoration: none;
}

.menu_preview_area .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 0 no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}

.menu_preview_area .pre_menu_list.no_menu .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 -18px no-repeat;
}

.menu_preview_area .pre_menu_item {
  line-height: 50px;
}

.sub_pre_menu_box .arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

.menu_preview_area .sub_pre_menu_box {
  bottom: 60px;
  background-color: #fafafa;
  border-top-width: 0;
}

.sub_pre_menu_box {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  border: 1px solid #d0d0d0;
  background-color: #fff;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.pre_menu_item .icon_menu_dot {
  background: url(../../assets/wechat/index.png) 0 -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
  *margin-top: 0;
}

.menu_form_area:after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  visibility: hidden;
  clear: both;
  height: 0 !important;
  display: block;
  line-height: 0;
}

.portable_editor.to_left {
  padding-left: 12px;
}

.portable_editor {
  position: relative;
}

.menu_form_area .editor_inner {
  height: 580px;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.portable_editor .editor_inner {
  padding: 0 20px 5px;
  background-color: #f4f5f9;
  border: 1px solid #e7e7eb;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.menu_form_hd {
  padding: 15px 0;
  font-size: 14px;
  border-bottom: 1px solid #e7e7eb;
}

.global_mod.float_layout .global_info {
  float: left;
}

.global_mod .global_extra {
  text-align: right;
}

.global_mod .global_extra a {
  color: #576b95;
}

.global_mod.float_layout:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}

.menu_form_hd h4 {
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.tips_global {
  color: #8d8d8d;
}

.menu_form_area .msg_sender_tips {
  padding-top: 15px;
}

.portable_editor .frm_control_group {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 0;
}

.portable_editor .frm_control_group {
  margin-bottom: 10px;
}

.portable_editor.to_left .editor_arrow_out {
  left: 0;
}

.portable_editor.to_left .editor_arrow_wrp {
  left: 0;
  top: 20px;
}

.menu_form_area .portable_editor.to_left .editor_arrow_wrp {
  top: 545px;
}

.portable_editor.to_left .editor_arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: dashed;
  border-color: transparent;
  border-left-width: 0;
  border-right-color: #e7e7eb;
  border-right-style: solid;
}

.portable_editor .editor_arrow_wrp,
.portable_editor .editor_arrow {
  position: absolute;
}

.portable_editor.to_left .editor_arrow_in {
  left: 1px;
  border-right-color: #f4f5f9;
}

.toolbar {
  text-align: center;
  padding: 30px;
}
.menu_holder {
  overflow: hidden;
  padding: 20px 0;
}
.clearfix {
  margin-bottom: 10px;
}
.label {
  float: left;
  width: 100px;
  padding-top: 11px;
}
.label-content {
  width: auto;
  overflow: hidden;
}

.label-content-input {
  width: 400px;
}
.label-content-tip {
  color: #8d8d8d;
  padding-top: 10px;
}
.label-content-error {
  color: red;
  padding-top: 10px;
}
.label-n {
  padding: 0;
}
.edit-box-tip {
  color: #8d8d8d;
  padding-bottom: 20px;
}
.edit-box {
  background-color: #fff;
  padding: 20px;
}
</style>
